<template>
  <div class="service-carousel">
    <div class="swiper service-swiper">
      <div class="swiper-wrapper">
        <template v-for="(item, index) in serviceList" :key="index">
          <div class="swiper-slide" style="max-height: 500px">
            <!-- <div style="width: 100%; height: 500px"></div> -->
            <div class="type-service">
              <img
                :src="
                  $getImgUrlFromMediaById(item.featured_media_src_url)
                    ? $getImgUrlFromMediaById(item.featured_media_src_url)
                    : require('@/assets/image/banner-default.png')
                "
              />
            </div>
          </div>
        </template>
      </div>

      <div class="swiper-controller-wrapper">
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getArticleList } from "@/api/index";

import Swiper, { Navigation, Pagination, Controller, Autoplay } from "swiper";
// Import Swiper styles
import "swiper/css";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({
  // serviceList: {
  //   type: Array,
  //   required: true,
  // },
});

const data = reactive({
  swiperOptions: {
    modules: [Navigation, Pagination, Controller, Autoplay],
    loop: true, //循环播放
    autoplay: { delay: 3000, disableOnInteraction: false },
    speed: 2000,
    // centeredSlides: true, //设置slide居中
    spaceBetween: 0,
    breakpoints: {
      640: {
        //当屏幕宽度大于等于320
        slidesPerView: 1,
        spaceBetween: 0,
      },
    },
    // navigation: {
    //   nextEl: ".banner-carousel .swiper-button-next",
    //   prevEl: ".banner-carousel .swiper-button-prev",
    // },
    pagination: {
      el: ".service-carousel .swiper-pagination",
      clickable: true,
      bulletClass: "my-bullet",
      bulletActiveClass: "my-bullet-active",
    },
    observer: true,
    observeParents: true,
  },
  //
  serviceList: [],
});
const { serviceList } = toRefs(data);

onBeforeMount(() => {
  methods.getList();
});
onMounted(() => {
  const serviceSwiper = new Swiper(".service-swiper", data.swiperOptions);
});

const methods = {
  getList: function () {
    var params = {
      categories: 62,
      per_page: 99,
    };
    getArticleList(params).then((res) => {
      data.serviceList = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.service-carousel {
  .type-service {
    position: relative;
    margin-bottom: 0;
    max-width: 100%;

    img {
      display: block;
      width: 100%;
      height: 50vh;
      overflow: hidden;
    }

    .entry-summary {
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      position: absolute;
      z-index: 99;
      width: 100%;
      /* text-align: justify; */
      top: 160px;
      padding: 0 100px;
      margin-left: 0px;

      .entry-wrapper {
        padding: 10%;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        -wbekit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);

        .entry-title {
          font-size: 2rem;
          font-family: Muli, sans-serif;
          font-weight: 300;
          text-transform: capitalize;
          line-height: 1;
          margin-bottom: 0.8rem;
        }
      }
    }
  }

  .swiper-controller-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    ::v-deep .swiper-pagination {
      margin-top: 20px;

      .my-bullet {
        border-radius: 50%;
        margin: 4px;
        background: #dbdde6;
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
        transition: width 0.3s;
        cursor: pointer;
      }

      .my-bullet-active {
        display: inline-block;
        background: #05cbb8;
        border-radius: 4px;
      }
    }
  }
}
</style>
